<template>
  <div class="cart-box">
    <div class="header">
      <span><Analysis fill="#b37feb" /> 流量数据</span>
    </div>
    <div class="p-20">
      <div id="cart-box" style="width: 100%; height: 400px" ref="cartboxRef"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import type { ECharts } from 'echarts';
import { Analysis } from '@icon-park/vue-next';
import { useResize } from '@/hooks';

const cartboxRef = ref();

var myChart: ECharts;
var chartOptions = {
  title: {
    text: '访问量 vs 下载量'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['访问量', '下载量']
  },
  grid: {
    left: '10px',
    bottom: '10px',
    right: '60px',
    containLabel: true
  },
  xAxis: [
    {
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '访问量',
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4481eb' },
          { offset: 1, color: '#04befe' }
        ])
      },
      data: [220, 202, 301, 334, 390, 430, 302, 260, 320, 520, 220, 120],
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: '下载量',
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#84fab0' },
          { offset: 1, color: '#8fd3f4' }
        ])
      },
      data: [220, 290, 201, 234, 160, 230, 106, 220, 234, 220, 102, 220],
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    }
  ]
};

function initEcharts() {
  var chartDom = document.getElementById('cart-box');
  myChart = echarts.init(chartDom);
  myChart.setOption(chartOptions);
}

useResize(cartboxRef, () => {
  myChart.resize();
});

onMounted(() => {
  initEcharts();
});
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  border-bottom: 1px solid var(--admin-border-color);
  font-size: 14px;
}
.cart-box {
  overflow: hidden;
}
</style>
